<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'个人评测-团灭音标'"> </Breadcrumb>
        <RouterTabs :list="routerList" :current="3"> </RouterTabs>
        <view class="content">
          <view class="title">
            {{ chapterName }}
          </view>
          <view class="box">
            <view class="box_content flex-2">
              <view class="audio">
                <view class="box_title">音频浅析</view>
                <view class="audio_content">
                  <audioPlayer
                    ref="audioPlayer"
                    v-if="audio"
                    startPic="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/audio_play.png"
                    endPic="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/audio_suspend.png"
                    :audioId="'audio' + id"
                    :url="audio"
                  ></audioPlayer>
                </view>
              </view>
              <view class="list">
                <view class="box_title">单词列表</view>
                <view class="list_content">
                  <image :src="image" mode="widthFix"></image>
                </view>
              </view>
            </view>
            <view class="box_center">
              <view class="video">
                <view class="box_title">口型视频</view>
                <view class="video_content">
                  <video :src="video" controls object-fit="fill"></video>
                </view>
              </view>
              <view class="list">
                <view class="box_title">划重点</view>
                <view class="list_content">
                  <view class="list_text" v-html="keyPoint"></view>
                </view>
              </view>
            </view>
            <view class="box_content flex-1">
              <view class="button" @click="startTraining()">
                <image
                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/ace_button.png"
                  mode="widthFix"
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getPhoneticChapterDetail } from "@/api/spelling";
export default {
  components: {},
  beforeRouteLeave(to, from, next) {
    this.$refs.audioPlayer.pause();
    next();
  },
  data() {
    return {
      routerList: [
        {
          name: "练习字母",
          url: "pages/spelling/letter",
        },
        {
          name: "浅学音标",
          url: "pages/spelling/soundmarkShallow",
        },
        {
          name: "拼读训练",
          url: "pages/spelling/spellingTraining",
        },
        {
          name: "团灭音标",
          url: "pages/spelling/soundmarkAce",
        },
        {
          name: "暴击词汇",
          url: "pages/spelling/vocabulary",
        },
      ],
      id: "",
      chapterName: "",
      audio: "",
      image: "",
      video: "",
      keyPoint: "",
    };
  },
  onLoad(option) {
    this.id = option.id;
    this.init();
  },
  methods: {
    init() {
      getPhoneticChapterDetail(this.id).then((res) => {
        this.chapterName = res.data.chapterName;
        this.audio = res.data.audio;
        this.image = res.data.img;
        this.video = res.data.video;
        this.keyPoint = res.data.keyPoint;
      });
    },
    startTraining() {
      uni.navigateTo({
        url: `/pages/spelling/soundmarkAceWord?id=${this.id}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./soundmarkAceDetail";
</style>
